<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
		<meta content="Discover the rich set of features in CanvasFlip. Explore everything about rapid prototyping, sharing and analyzing the UX of prototypes on the tool. Know more." name="description">
		<meta name="robots" content="index, follow">
		<meta name="googlebot" content="index, follow">
		<meta name="keywords" content="features,rapid prototyping,sharing,analyzing,prototypes">
		<meta name="author" content="CANVASFLIP.COM">
		<meta name="copyright" content="CANVASFLIP.COM">
		<title>抽奖</title>
		<link href="css/layer.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>
		<style>
			*, :after, :before {
			    margin: 0;
			    padding: 0;
			    box-sizing: border-box;
			}
			* {
				margin: 0;
				padding: 0;
			}
			main{padding-top: 3em;}
			table {
				border-spacing: 0;
				border-collapse: collapse;
				text-align: center;
			}
			
			.draw {
				width: 560px;
				height: 600px;
				margin: 0 auto;
				padding:51px;
				background-image: url(images/bg.png);
				background-repeat: no-repeat;
				background-size: 100%;
			}
			
			.draw .item {
				width: 150px;
				height: 150px;
				background-image: url(images/bg1.png);
				background-repeat: no-repeat;
				background-size: 96%;
			}
			
			.draw .item.active {
				background-image: url(images/bg2.png);
				background-repeat: no-repeat;
				background-size: 100%;
			}
			
			.draw .img {
				display: table-cell;
				width: 150px;
				height: 61px;
				vertical-align: middle;
				text-align: center;
			}
			
			.draw .img img {
				vertical-align: top;
			}
			
			.draw .gap {
				width: 5px;
			}
			
			.draw .gap-2 {
				height: 5px;
			}
			
			.draw .name {
				display: block;
				margin-top: 10px;
				font-size: 14px;
			}
			
			.draw .draw-btn {
				display: block;
				height: 150px;
				line-height: 150px;
				border-radius: 20px;
				font-size: 25px;
				font-weight: 700;
				text-decoration: none;
				background-image: url(images/bg3.png);
				background-repeat: no-repeat;
				background-size: 96%;
			}
		</style>
	</head>

	<body ng-app="mainApp" ng-controller="indexCtrl" style="background: #f02d2f;">
		<div class="headerWrapper container-fluid">
			
		</div>

		<main style="background: #f02d2f;">
			<div class="draw" id="lottery">
				<table>
					<tr>
						<td class="item lottery-unit lottery-unit-0">
							<div class="img">
								<img src="images/img1.png" alt="">
							</div>
							<span class="name">终身VIP会员</span>
						</td>
						<td class="gap"></td>
						<td class="item lottery-unit lottery-unit-1">
							<div class="img">
								<img src="images/img2.png" alt="">
							</div>
							<span class="name">三年VIP会员</span>
						</td>
						<td class="gap"></td>
						<td class="item lottery-unit lottery-unit-2">
							<div class="img">
								<img src="images/img3.png" alt="">
							</div>
							<span class="name">半年VIP会员</span>
						</td>
					</tr>
					<tr>
						<td class="gap-2" colspan="5"></td>
					</tr>
					<tr>
						<td class="item lottery-unit lottery-unit-7">
							<div class="img">
								<img src="images/img4.png" alt="">
							</div>
							<span class="name">399元充值卡一张</span>
						</td>
						<td class="gap"></td>
						<td class="">
							<a class="draw-btn" href="javascript:"></a>
						</td>
						<td class="gap"></td>
						<td class="item lottery-unit lottery-unit-3">
							<div class="img">
								<img src="images/img5.png" alt="">
							</div>
							<span class="name">100元充值卡一张</span>
						</td>
					</tr>
					<tr>
						<td class="gap-2" colspan="5"></td>
					</tr>
					<tr>
						<td class="item lottery-unit lottery-unit-6">
							<div class="img">
								<img src="images/img7.png" alt="">
							</div>
							<span class="name">免费体验一次</span>
						</td>
						<td class="gap"></td>
						<td class="item lottery-unit lottery-unit-5">
							<div class="img">
								<img src="images/img6.png" alt="">
							</div>
							<span class="name">九折优惠券一张</span>
						</td>
						<td class="gap"></td>
						<td class="item lottery-unit lottery-unit-4">
							<div class="img">
								<img src="images/img8.png" alt="">
							</div>
							<span class="name">参与大礼包一份</span>
						</td>
					</tr>
				</table>
			</div>

		</main>

		<!--Import Copyright -->
		

		<!--弹窗layer-->
		<script src="js/layer.js"></script>
		
		
		
		
		
		<script type="text/javascript">
			var lottery = {
				index: -1, //当前转动到哪个位置，起点位置
				count: 0, //总共有多少个位置
				timer: 0, //setTimeout的ID，用clearTimeout清除
				speed: 20, //初始转动速度
				times: 0, //转动次数
				cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
				prize: -1, //中奖位置
				init: function(id) {
					if($('#' + id).find('.lottery-unit').length > 0) {
						$lottery = $('#' + id);
						$units = $lottery.find('.lottery-unit');
						this.obj = $lottery;
						this.count = $units.length;
						$lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active');
					};
				},
				roll: function() {
					var index = this.index;
					var count = this.count;
					var lottery = this.obj;
					$(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
					index += 1;
					if(index > count - 1) {
						index = 0;
					};
					$(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
					this.index = index;
					return false;
				},
				stop: function(index) {
					this.prize = index;
					return false;
				}
			};

			function roll() {
				lottery.times += 1;
				lottery.roll(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化

				if(lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
					clearTimeout(lottery.timer);
				
					layer.open({
			           type: 1,			           
			           shadeClose: true,
			           shade: false,
			           maxmin: true, //开启最大化最小化按钮
			           area: ['893px', '600px'],
			           content: $("#info").html()
					});
					
					lottery.prize = -1;
					lottery.times = 0;
					click = false;
				} else {
					if(lottery.times < lottery.cycle) {
						lottery.speed -= 10;
					} else if(lottery.times == lottery.cycle) {
						var index = Math.random() * (lottery.count) | 0; //静态演示，随机产生一个奖品序号，实际需请求接口产生
						lottery.prize = index;
					} else {
						if(lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
							lottery.speed += 110;
						} else {
							lottery.speed += 20;
						}
					}
					if(lottery.speed < 40) {
						lottery.speed = 40;
					};
					lottery.timer = setTimeout(roll, lottery.speed); //循环调用
				}
				return false;
			}

			var click = false;

			window.onload = function() {
				lottery.init('lottery');
				$('.draw-btn').click(function() {
					if(click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
						return false;

					} else {
						lottery.speed = 100;
						roll(); //转圈过程不响应click事件，会将click置为false
						click = true; //一次抽奖完成后，设置click为true，可继续抽奖		
						return false;
					}
				});
			};
		</script>
	</body>

	<div id='info' style = "display : none">
	   <a href=""><img src="images/tk_img.png"></a>
	   <h1>100元</h1>
	</div>
</html>